<template>
    <view class="search-label">
		<view class="item" v-for="(item, index) in labelList" :key="index">
			<view class="title">
				<view class="name">
					{{ item.name }}
				</view>
				<view class="function" @click="fun(index, item)">
					{{ item.fun }}
				</view>
			</view>
			<view class="label_box" ref="label" :style="{maxHeight: item.height || '160rpx'}">
				<view class="label" v-for="(items, i) in item.label" :key="i" @click="selectLabel(items)">
					{{ items }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		labelList: {
			type: Array,
			default: []
		}
	},
    components: {},
    data() {
        return {
		};
    },
    computed: {},
    methods: {
		selectLabel(value) {
			this.$emit('selectLabel', value)
		},
		fun( index, item) {
			// console.log(index, item,'123');
			this.$emit('fun',{index: index, item: item});
		}
	},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
		// console.log(this.labelList,'labelList');
	},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
	.search-label{
		.item + .item{
			padding-top: 48rpx;
		}
		.item{
			.title{
				display: flex;
				justify-content: space-between;
				padding: 0 32rpx 48rpx;
				.name{
					font-size: 28rpx;
					line-height: 1em;
					font-weight: 600;
					color: #333;
				}
				.function{
					font-size: 24rpx;
					line-height: 1em;
					color: #999999;
				}
			}
		}
		.label_box{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding-right: 32rpx;
			/* max-height: 160rpx; */
			overflow: hidden;
			.label{
				border: 1px solid #EEEEEE;
				border-radius: 8rpx;
				padding: 0 24rpx;
				font-size: 24rpx;
				line-height: 64rpx;
				margin-left: 32rpx;
				margin-bottom: 16rpx;
			}
		}
	}
</style>
